var thisWidget;

function initWidgetView(t) {
    (thisWidget = t).config && thisWidget.config.style && $("body").addClass(thisWidget.config.style), 
    $("#btn_plot_delall").click(function () {
        thisWidget.deleteAll();
    }), $("#btnDelete").click(function (t) {
        thisWidget.deleteCurrentEntity(), tab2plot()
    }), $("#btnCenter").click(function (t) {
        thisWidget.centerCurrentEntity()
    });
    var a = !0;
    $("#btn_plot_isedit").click(function () {
        (a = !a) ? ($(this).removeClass("active"), $(this).children().removeClass("fa-lock").addClass("fa-unlock")) : ($(this).addClass("active"), $(this).children().removeClass("fa-unlock").addClass("fa-lock")), thisWidget.hasEdit(a)
    }), plotFile.initEvent(), plotEdit.initEvent(), plotEdit.loadConfig()
}
var plotFile = {
        initEvent: function () {
            var i, n = this;
            $("#btn_plot_openfile").click(function () {
                i = !0, $("#input_plot_file").click()
            }), $("#btn_plot_openfile2").click(function () {
                i = !1, $("#input_plot_file").click()
            }), $("#btn_plot_savefile").click(function () {
                var t = thisWidget.getGeoJson();
                null == t || "" == t ? toastr.warning("当前未标绘任何数据！") : haoutil.file.downloadFile("标绘.json", JSON.stringify(t))
            }), $("#input_plot_file").change(function (t) {
                var a = this.files[0],
                    e = a.name;
                if ("json" != e.substring(e.lastIndexOf(".") + 1, e.length).toLowerCase()) return toastr.error("文件类型不合法,请选择json格式标注文件！"), void n.clearPlotFile();
                if (window.FileReader) {
                    var l = new FileReader;
                    l.readAsText(a, "UTF-8"), l.onloadend = function (t) {
                        var a = this.result;
                        thisWidget.jsonToLayer(a, i, !0), n.clearPlotFile()
                    }
                }
            })
        },
        clearPlotFile: function () {
            window.addEventListener ? document.getElementById("input_plot_file").value = "" : document.getElementById("input_plot_file").outerHTML += ""
        }
    },
    plotlist = {
        bindSelList: function () {
            var n = this,
                s = $("#sel_plot_list");
            $.getJSON("config/plotlist.json", function (e) {
                var t, a = "",
                    l = 0;
                for (var i in e) a += '<option value="' + i + '">' + i + "(" + e[i].length + ")</option>", null == t && (t = i), l++;
                t && (n.showPlotList(e[t]), s.attr("data-value", t)), 1 < l ? (s.html(a), s.select(), s.change(function () {
                    var t = $(this).attr("data-value"),
                        a = e[t];
                    n.showPlotList(a)
                })) : (s.hide(), $(".mp_mark").css({
                    "margin-top": "10px"
                }))
            })
        },
        _listData: null,
        showPlotList: function (t) {
            this._listData = t;
            for (var a = "", e = 0; e < t.length; e++) {
                var l, i = t[e],
                    n = i.edittype || i.type;
                if (plotEdit.defval[n]) l = (r = plotEdit.defval[n]).style.image;
                if (i.image && (l = i.image), i.style && i.style.image && (l = i.style.image), l) l = l.startsWith("$plot$") ? l.replace("$plot$/", "") : "../../" + l, a += ' <li onclick="plotlist.startPlot(' + e + ',this)"> <i title="' + i.name + '"  > <img src="' + l + '" style="max-width: 50px;max-height: 50px;" /></i></li>';
                else {
                    var s, r, o = "#000000";
                    if (plotEdit.defval[n]) s = (r = plotEdit.defval[n]).style.iconClass, o = r.style.color;
                    i.iconClass && (s = i.iconClass), i.style && i.style.iconClass && (s = i.style.iconClass), i.color && (o = i.color), i.style && i.style.color && (o = i.style.color), a += s ? '<li onclick="plotlist.startPlot(' + e + ',this)"><i title="' + i.name + '"  class="' + s + '" style="color:' + o + '"></i></li>' : '<li onclick="plotlist.startPlot(' + e + ',this)"><i title="' + i.name + '" style="font-size: 13px;">' + i.name + "</i></li>"
                }
            }
            $("#plotlist").html(a)
        },
        _lastLi: null,
        startPlot: function (t, a) {
            var e = $(a);
            e.addClass("markon"), this._lastLi && this._lastLi.removeClass("markon"), this._lastLi = e;
            var l = this._listData[t],
                i = l.edittype || l.type,
                n = haoutil.system.clone(plotEdit.defval[i] || {});
            if (l.style)
                for (var s in l.style) n.style[s] = l.style[s];
            if (l.attr)
                for (var s in l.attr) n.attr[s] = l.attr[s];
            n.type = l.type, n.name = n.name || l.name, thisWidget.startDraw(n)
        },
        plotEnd: function () {
            this._lastLi && this._lastLi.removeClass("markon")
        }
    },
    plotEdit = {
        hasEditSylte: !0,
        config: {},
        defval: {},
        initEvent: function () {
            this.hasEditSylte || $("#attr_style_view").hide(), $("#plot_latlngs_allheight").bind("input propertychange", function () {
                $("#plot_latlngs_addheight").val("");
                var t = Number($(this).val());
                isNaN(t) && (t = 1);
                var a = [];
                $(".plot_latlngs").each(function () {
                    "height" == $(this).attr("data-type") ? ($(this).val(t), a.push(t)) : a.push(Number($(this).val()))
                }), thisWidget.updateGeo2map(a, !0)
            }), $("#plot_latlngs_addheight").bind("input propertychange", function () {
                $("#plot_latlngs_allheight").val("");
                var a = Number($(this).val());
                isNaN(a) && (a = 1);
                var e = [];
                $(".plot_latlngs").each(function () {
                    if ("height" == $(this).attr("data-type")) {
                        var t = Number($(this).attr("oldvalue"));
                        $(this).val(t + a), e.push(t + a)
                    } else e.push(Number($(this).val()))
                }), thisWidget.updateGeo2map(e, !0)
            })
        },
        loadConfig: function () {
            var s = this;
            $.getJSON("config/attr.json", function (t) {
                for (var a in s.config = t) {
                    for (var e = {}, l = 0; l < t[a].style.length; l++) {
                        e[(n = t[a].style[l]).name] = n.defval
                    }
                    var i = {};
                    for (l = 0; l < t[a].attr.length; l++) {
                        var n;
                        i[(n = t[a].attr[l]).name] = n.defval
                    }
                    s.defval[a] = {
                        edittype: a,
                        name: t[a].name,
                        config: t[a].config,
                        style: e,
                        attr: i
                    }
                }
                plotlist.bindSelList()
            })
        },
        _last_attr: null,
        startEditing: function (t, a) {
            this._last_attr = t;
            var e = this.config[t.edittype] || {};
            a && this.updateLatlngsHtml(a, e.config);
            var l = [];
            if (this.hasEditSylte) {
                for (var i = "plot_attr_style_", n = '<tr><td class="nametd">类型：</td><td>' + (e.name || t.name) + "</td></tr>", s = 0; s < e.style.length; s++) {
                    if ("hidden" != (d = e.style[s]).type) {
                        var r = d.name,
                            o = t.style[r];
                        (p = this.getAttrInput(i, r, o, d)).fun && l.push({
                            parname: i,
                            name: r,
                            value: o,
                            edit: d,
                            fun: p.fun
                        }), n += '<tr  id="' + i + "tr_" + r + '" > <td class="nametd">' + d.label + "</td>  <td>" + p.html + "</td>  </tr>"
                    }
                }
                $("#talbe_style").html(n)
            }
            i = "plot_attr_attr_", n = "";
            for (s = 0; s < e.attr.length; s++) {
                var d;
                if ("hidden" != (d = e.attr[s]).type) {
                    var p;
                    r = d.name, o = t.attr[r];
                    (p = this.getAttrInput(i, r, o, d)).fun && l.push({
                        parname: i,
                        name: r,
                        value: o,
                        edit: d,
                        fun: p.fun
                    }), n += '<tr  id="' + i + "tr_" + r + '" > <td class="nametd">' + d.label + "</td>  <td>" + p.html + "</td>  </tr>"
                }
            }
            $("#talbe_attr").html(n);
            for (s = 0; s < l.length; s++) {
                var h = l[s];
                h.fun(h.parname, h.name, h.value, h.edit)
            }
            tab2attr()
        },
        lastCfg: null,
        updateLatlngsHtml: function (t, a) {
            a = a || this.lastCfg || {}, this.lastCfg = a, $("#plot_latlngs_addheight").val(""), $("#plot_latlngs_allheight").val(""), $("#view_updateheight").hide(), a.hasOwnProperty("height") || (a.height = !0);
            var e = "";
            if (t && 0 != t.length)
                if (1 == t.length) {
                    var l = (o = t[0])[0],
                        i = o[1],
                        n = 3 == o.length ? o[2] : 0;
                    e += ' <div class="mp_attr" style=" margin-top: 10px;"><table> <tr> <td class="nametd">经度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="jd" value="' + l + '"></td></tr><tr>  <td class="nametd">纬度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="wd" value="' + i + '"></td></tr>', a.height && (e += '<tr><td class="nametd">高程：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="height" value="' + n + '" oldvalue="' + n + '"></td></tr>'), e += " </table> </div>"
                } else {
                    a.height && $("#view_updateheight").show();
                    var s = "";
                    t.length > (a.minPointNum || 3) && (s = '<i class="fa fa-trash-o latlng-del" title="删除点" ></i>');
                    for (var r = 0; r < t.length; r++) {
                        l = (o = t[r])[0], i = o[1], n = 3 == o.length ? o[2] : 0;
                        var o, d = "";
                        (null == a.maxPointNum || t.length < a.maxPointNum) && (d = '<i class="fa  fa-plus-square-o latlng-install" title="插入点" data-index="' + r + '" ></i>&nbsp;&nbsp;'), e += '<div><div class="open"><i class="tree_icon">-</i>第' + (r + 1) + '点 <label style="width:100px;">&nbsp;</label>    ' + d + s + ' </div><div class="mp_attr"><table><tr> <td class="nametd">经度：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="jd" data-index="' + r + '" value="' + l + '"></td>  </tr> <tr>  <td class="nametd">纬度：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="wd" data-index="' + r + '" value="' + i + '"></td> </tr> ', a.height && (e += '<tr>  <td class="nametd">高程：</td> <td><input  type="number" class="mp_input plot_latlngs" data-type="height" data-index="' + r + '" value="' + n + '" oldvalue="' + n + '"></td> </tr> '), e += " </table> </div> </div>"
                    }
                }
            else;
            $("#view_latlngs").html(e), $("#view_latlngs .open").click(changeOpenShowHide);
            var p = this;
            $("#view_latlngs .latlng-del").click(function () {
                $(this).parent().parent().remove();
                var t = [],
                    a = !1;
                $(".plot_latlngs").each(function () {
                    t.push(Number($(this).val())), "height" === $(this).attr("data-type") && (a = !0)
                }), thisWidget.updateGeo2map(t, a);
                var e = [];
                if (a)
                    for (var l = 0; l < t.length; l += 3) e.push([t[l], t[l + 1], t[l + 2]]);
                else
                    for (l = 0; l < t.length; l += 2) e.push([t[l], t[l + 1]]);
                p.updateLatlngsHtml(e)
            }), $("#view_latlngs .latlng-install").click(function () {
                var t = Number($(this).attr("data-index")),
                    a = [],
                    e = !1;
                $(".plot_latlngs").each(function () {
                    a.push(Number($(this).val())), "height" === $(this).attr("data-type") && (e = !0)
                });
                var l = [];
                if (e)
                    for (var i = 0; i < a.length; i += 3) l.push([a[i], a[i + 1], a[i + 2]]);
                else
                    for (i = 0; i < a.length; i += 2) l.push([a[i], a[i + 1]]);
                var n = l[t],
                    s = t == l.length - 1 ? l[0] : l[t + 1],
                    r = Number(((n[0] + s[0]) / 2).toFixed(6)),
                    o = Number(((n[1] + s[1]) / 2).toFixed(6));
                if (e) {
                    var d = Number(((n[2] + s[2]) / 2).toFixed(1));
                    l.splice(t + 1, 0, [r, o, d]), a.splice(3 * (t + 1), 0, r, o, d)
                } else l.splice(t + 1, 0, [r, o]), a.splice(3 * (t + 1), 0, r, o);
                p.updateLatlngsHtml(l), thisWidget.updateGeo2map(a, e)
            }), $(".plot_latlngs").bind("input propertychange", function () {
                var t = [],
                    a = !1;
                $(".plot_latlngs").each(function () {
                    t.push(Number($(this).val())), "height" === $(this).attr("data-type") && (a = !0)
                }), thisWidget.updateGeo2map(t, a)
            })
        },
        stopEditing: function () {
            tab2plot(), $("#talbe_style").html(""), $("#talbe_attr").html(""), this._last_attr = null
        },
        getAttrInput: function (t, a, e, l) {
            null != e && null != e || (e = "");
            var s = this,
                i = "",
                n = null;
            switch (l.type) {
                default:
                case "label":
                    i = e;
                    break;
                case "text":
                    i = '<input id="' + t + a + '" type="text" value="' + e + '"   class="mp_input" />', n = function (e, l, t, a) {
                        $("#" + e + l).on("input propertychange", function (t) {
                            var a = $(this).val();
                            s.updateAttr(e, l, a)
                        })
                    };
                    break;
                case "textarea":
                    i = '<textarea  id="' + t + a + '"     class="mp_input" style="height:50px;resize: none;" >' + (e = e.replace(new RegExp("<br />", "gm"), "\n")) + "</textarea>", n = function (e, l, t, a) {
                        $("#" + e + l).on("input propertychange", function (t) {
                            var a = $(this).val();
                            0 == a.length && (a = "文字"), a = a.replace(/\n/g, "<br />"), s.updateAttr(e, l, a)
                        })
                    };
                    break;
                case "number":
                    i = '<input id="' + t + a + '" type="number" value="' + e + '"    class="mp_input"/>', n = function (e, l, t, a) {
                        $("#" + e + l).on("input propertychange", function (t) {
                            var a = Number($(this).val());
                            s.updateAttr(e, l, a)
                        })
                    };
                    break;
                case "combobox":
                    i = '<select id="' + t + a + '" class="mp_select"    data-value="' + e + '" >';
                    for (var r = 0; r < l.data.length; r++) {
                        var o = l.data[r];
                        i += '<option value="' + o.value + '">' + o.text + "</option>"
                    }
                    i += "</select>", n = function (l, i, t, n) {
                        $("#" + l + i).select(), $("#" + l + i).change(function () {
                            var t = $(this).attr("data-value");
                            s.updateAttr(l, i, t);
                            for (var a = 0; a < n.data.length; a++) {
                                var e = n.data[a];
                                null != e.impact && s.changeViewByAttr(l, e.impact, e.value === t)
                            }
                        });
                        for (var a = 0; a < n.data.length; a++) {
                            var e = n.data[a];
                            null != e.impact && s.changeViewByAttr(l, e.impact, e.value === t)
                        }
                    };
                    break;
                case "radio":
                    var d = t + a;
                    i = '  <div class="radio radio-info radio-inline">                                <input type="radio" id="' + d + '_1" value="1"  name="' + d + '"  ' + (e ? 'checked="checked"' : "") + '>                                <label for="' + d + '_1"> 是</label>                            </div>                            <div class="radio radio-info radio-inline">                                <input type="radio" id="' + d + '_2" value="2" name="' + d + '" ' + (e ? "" : 'checked="checked"') + ' ">                                <label for="' + d + '_2"> 否 </label>                            </div>', n = function (a, e, t, l) {
                        $('input:radio[name="' + a + e + '"]').change(function () {
                            var t = "1" == $(this).val();
                            s.updateAttr(a, e, t), s.changeViewByAttr(a, l.impact, t)
                        }), s.changeViewByAttr(a, l.impact, t)
                    };
                    break;
                case "color":
                    i = '<input id="' + t + a + '"  class="mp_input" style="width: 100%;"  value="' + e + '" />', n = function (e, l, t, a) {
                        $("#" + e + l).minicolors({
                            position: "bottom right",
                            control: "saturation",
                            change: function (t, a) {
                                s.updateAttr(e, l, t)
                            }
                        })
                    };
                    break;
                case "slider":
                    i = '<input id="' + t + a + '"  type="text" value="' + 100 * e + '" />', n = function (a, e, t, l) {
                        var i = .7 * $(".mp_tab_card").width() - 30;
                        $("#" + a + e).progress(i), $("#" + a + e).change(function () {
                            var t = Number($(this).val()) / 100;
                            s.updateAttr(a, e, t)
                        })
                    };
                    break;
                case "window":
                    i = '<input id="' + t + a + '" type="text" value="' + e + '" readonly   class="mp_input" />', n = function (e, l, a, t) {
                        $("#" + e + l).on("click", function (t) {
                            thisWidget.showEditAttrWindow({
                                data: s._last_attr,
                                parname: e,
                                attrName: l,
                                attrVal: a
                            })
                        }), $("#" + e + l).on("input propertychange", function (t) {
                            var a = $(this).val();
                            s.updateAttr(e, l, a)
                        })
                    }
            }
            return {
                html: i,
                fun: n
            }
        },
        changeViewByAttr: function (t, a, e) {
            if (a && 0 < a.length)
                for (var l = 0; l < a.length; l++) {
                    var i = a[l];
                    e ? $("#" + t + "tr_" + i).show() : $("#" + t + "tr_" + i).hide()
                }
        },
        updateAttr: function (t, a, e) {
            switch (t) {
                case "plot_attr_style_":
                    this._last_attr.style[a] = e;
                    break;
                case "plot_attr_attr_":
                    this._last_attr.attr[a] = e
            }
            thisWidget.updateAttr2map(this._last_attr)
        }
    };